@import "../../assets/style/global";

.app-side {
  width: 520px !important;
  max-width: 520px !important;
  background-color: $sideBgColor;
  padding: 0 40px;
}


.app-content {
  height: calc(100vh - 70px);
  background-color: $bgColor;
  margin: 0 30px;
  .app-content-h3{
    height: 75px;
    line-height: 75px;
    color: #fff;
    font-size: 20px;
  }
  .app-content-filter{
    margin-bottom: 10px;
    .filter-ipt{
      color: #e1eaf9;
      width: 250px;
      margin: 10px 15px 0 0;
      .ant-input {
        background-color: transparent;
        border: 1px solid rgba(224, 224, 224, 0.1);
        color: #D1DCE3;
      }
    }
    .filter-date{
      vertical-align: middle;
      background: transparent;
      width: 250px;
      margin-right: 15px;
      .ant-calendar-picker-input{
        color: #D1DCE3;
        border: 1px solid rgba(224, 224, 224, 0.1);
        .ant-calendar-range-picker-separator{
            color: $blueLight;
        }
        .ant-calendar-picker-icon{
            color: $blueLight;
        }
      }
      .ant-input{
        background-color: transparent;

      }
    }
    .filter-btn{
      margin: 10px 5px 0 5px;
      border: 1px solid $blueLight;
      color: $gray;
      &:hover{
        color: $grayLight;
        background: #465279 !important;
      }
      &.active{
        color: $blueLight;
        background: #465279;
      }
    }
  }
  .app-content-list{
    display: flex;
    flex-wrap: wrap;
    white-space: normal;
    overflow-y: auto;
    height: calc(100vh - 200px);
    max-height: 680px;
    .app-card{
      margin: 10px 20px 0 0;
      width: 230px;
      height: 320px;
      border: 1px solid transparent;
      background-color: #373b4a;
      width: 240px;
      position: relative;
      &:hover{
        border: 1px solid $blue;
      }
      &.active{
        border: 1px solid $blue;
      }
      .badge{
        position: absolute;
        display: flex;
        top: -5px;
        .badge-warning{
            // position: absolute;
            // top: -5px;
            // left: 0;
            width: 35px;
            height: 30px;
            display: flex;
            align-items: flex-start;
            padding: 3px 5px;
            color: $grayLight;
            cursor: pointer;
            background: url(./images/warning.png) center no-repeat;
            .light{
              width: 8px;
              height: 15px;
              background: url(./images/lighting.png) center no-repeat;
            }
          }
          .badge-order{
            // position: absolute;
            // top: -5px;
            // left: 40px;
            width: 35px;
            height: 30px;
            display: flex;
            align-items: flex-start;
            padding: 3px 5px;
            color: $grayLight;
            cursor: pointer;
            background: url(./images/oreder.png) center no-repeat;
            .label {
              height: 15px;
              width: 8px;
              background: url(./images/label.png) center no-repeat;
            }
          }
      }
     
      .ant-checkbox-inner{
        background-color: $sideBgColor;
        width: 20px;
        height: 20px;
        &::after{
          top: 8px;
          left: 4px;
          width: 7px;
          height: 13px;
        }
      }
      .ant-checkbox-checked .ant-checkbox-inner {
        background-color: $sideBgColor;
        border-color: transparent;
      }
      .app-header{
        text-align: center;
        margin-top: 30px;
        .app-header-bg{
          width: 70px;
          height: 70px;
          background-color: $gray;
          margin: auto;
          position: relative;
          .app-header-photo{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
          .app-header-name{
            display: block;
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translate(-50%, 0);
            width: 230px;
            text-align: center;
            color: $blueLight;
            font-size: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }
      }
      .app-detail{
        margin: 35px 20px 0;
        font-size: 12px;
        .app-detail-row{
          height: 30px;
          line-height: 30px;
          .col-left{
            text-align: right;
            width: 70px;
          }
          .col-right{
            text-align: left;
            width: calc(100% - 86px);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .col-level{
            color: $yellow;
          }
        }
      }
      .app-footer{
        text-align: center;
        margin-top: 15px;
        .ant-btn{
          border: 1px solid $blueLight;
          width: 90px;
          height: 30px;
          color: $gray;
          cursor: pointer;
          &:hover{
            color: $grayLight;
            background: #465279 !important;
          }
        }
      }
    }
  }
  .footer{
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
    .ant-pagination-item-link,
    .ant-pagination-item{
        background-color: $headerBgColor;
        border: none;
        color: $gray;
        a,
        .ant-pagination-item-ellipsis {
            color: $gray;
        }
        &.ant-pagination-item-active{
            a{
                color: $blue;
                border: 1px solid $blue;
                border-radius: 4px;
            }
        }
    }
}
  .ant-select-selection{
    background-color: transparent;
    color: #D1DCE3;
    border: 1px solid rgba(224, 224, 224, 0.1);
    .ant-select-arrow{
      color: #D1DCE3;
    }
  }

}

.ant-calendar-picker-container{
  color: #D1DCE3;
  .ant-calendar{
    background-color: #343b4a;
    .ant-calendar-input{
      background: transparent;
      color: #D1DCE3;
    }
    .ant-calendar-in-range-cell{
      color: #D1DCE3;
      &::before{
        background-color: $bgColor;
      }
    }
    .ant-calendar-my-select{
      .ant-calendar-month-select,
      .ant-calendar-year-select {
        color: #D1DCE3;
      }
      .ant-calendar-next-month-btn,
      .ant-calendar-next-year-btn {
        color: #D1DCE3;
      }
    }
    .ant-calendar-ym-select{
      .ant-calendar-year-select,
      .ant-calendar-month-select {
        color: #D1DCE3;
        &:hover{
          color: $blueLight;
        }
      }
    }

    .ant-calendar-next-month-btn,
    .ant-calendar-next-year-btn {
      color: #D1DCE3;
      &:hover {
        color: $blueLight;
      }
    }

    .ant-calendar-prev-year-btn,
    .ant-calendar-prev-month-btn {
      color: #D1DCE3;
      &:hover {
        color: $blueLight;
      }
    }
    .ant-calendar-date{
      color: #D1DCE3;
    }
    .ant-calendar-date:hover {
      background: #2B303B;
      cursor: pointer;
    }
  }
}



.modal-line{
    // height: 125px;
    width: 100%;
    margin-bottom: 45px;
    .modal-item{
      border-bottom: 1px solid $gray;
      > span{
        border-bottom: 2px solid $blueLight;
        height: 100%;
        display: inline-block;
        box-sizing: content-box;
        padding-left: 5px;
        display: inline-block;
        width: 90px;
      }
    }
    .modal-text{
      margin-top: 30px;
      color: #ff9543;
      .ant-radio-group{
          width: 100%;
      }
      .ant-radio-wrapper{
          width: 30%;
      }
    }
  }

// .data-list{
//     flex: 1 1 auto;
//     border-left: 1px solid #38475a;
//     border-left: 1px solid #2d3a52;
//     .dataBar{
//         width: 100%;
//         position: relative;
//         .bar {
//             position: absolute;
//             height: 20px;
//             top: 50%;
//             margin-top: 10%;
//             border-radius: 10px;
//         }
//         .text{
//             position: absolute;
//             top: 0;
//             right: 18px;
//             font-weight: bold;
//             font-size: 18px;
//             color: #fff;
//         }
//     }
//    .dataCompletion{
//        &:after{
//            position: absolute;
//            content: "";
//            z-index: -1;
//            width: 100%;
//            border-radius: 10px;
//            left: 0;
//            height: 20px;
//            top: 50%;
//            margin-top: -10px;
//        }
//    }
// }

.data-list{
    height: 65vh;
    overflow-y: auto;
    .row {
        display: flex;
        overflow: visible;
        position: relative;
        flex: 1 1 0%;
        clear: both;
        .icon {
            width: 16px;
            height: 16px;
            // margin-right: 8px;
            font-size: 16px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
            line-height: 32px;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.25);
            border-radius: 32px;
            -webkit-transition: background-color .3s, border-color .3s;
            transition: background-color .3s, border-color .3s;
            /* float: left;
            margin-right: 16px; */
            position: absolute;
            top: 0;
            left: 100px;
            span {
                display: inline-block;
                width: 10px;
                height: 10px;
                background: #1aa3ff;
                border-radius: 10px;
                position: absolute;
                top: 2px;
                left: 2px;
            }
        }
        .tail {
            position: absolute;
            top: 3px;
            left: 107px;
            width: 3px;
            height: 100%;
            height: calc(100% - 3px);
            background: #c5e5ff;
        }
    
        .last-tail{
            background: transparent;
        }
    
        .title {
            // float: left;
            width: 100px;
            display: inline-block;
        }
        .content {
            display: block;
            min-height: 48px;
            overflow: hidden;
            margin-left: 40px;
        }
        
    }

   

    /* .tail::after {
        display: inline-block;
        width: 100%;
        height: 1px;
        content: "";
        background: rgb(232, 232, 232);
        border-radius: 1px;
        transition: background 0.3s ease 0s;
    } */

    
}

